<template>
  <ele-modal
    form
    width="900"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <el-tabs type="border-card">
      <el-tab-pane label="证件资料">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="行驶证" name="12">
            <el-image
              v-for="(item, key) in detail.xszImg"
              :key="key"
              class="img"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-collapse-item>
          <el-collapse-item title="驾驶证" name="13">
            <el-image
              v-for="(item, key) in detail.jszImg"
              :key="key"
              class="img"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-collapse-item>
          <el-collapse-item title="身份证" name="14">
            <el-image
              v-for="(item, key) in detail.sfzImg"
              :key="key"
              class="img"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-collapse-item>
          <el-collapse-item title="从业资格证" name="15">
            <el-image
              v-for="(item, key) in detail.cyzgzImg"
              :key="key"
              class="img"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-collapse-item>
          <el-collapse-item title="其他图片" name="16">
            <el-image
              v-for="(item, key) in detail.qtzImg"
              :key="key"
              class="img"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="车辆信息">
        <el-descriptions class="margin-top" :column="2" size="default" border>
          <el-descriptions-item label-align="right">
            <template #label>
              <i class="el-icon-collection-tag"></i>
              所属车队
            </template>
            {{ detail.company }}（{{ detail.area }}）
          </el-descriptions-item>
          <el-descriptions-item label-align="right">
            <template #label>
              <i class="el-icon-user"></i>
              车牌号
            </template>
            {{ detail.plate_number }}
          </el-descriptions-item>
          <el-descriptions-item label-align="right">
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              车主
            </template>
            {{ detail.realanme }}
          </el-descriptions-item>
          <el-descriptions-item label-align="right">
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              车主电话
            </template>
            {{ detail.tel }}
          </el-descriptions-item>
          <el-descriptions-item label-align="right">
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              车主身份证
            </template>
            {{ detail.idcard }}
          </el-descriptions-item>
          <el-descriptions-item label-align="right">
            <template #label>
              <i class="el-icon-mobile-phone"></i>
              车主地址
            </template>
            {{ detail.address }}
          </el-descriptions-item>
          <el-descriptions-item label-align="right">
            <template #label> 交强险到期 </template>
            {{ detail.insurance_date_c }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 商业险到期 </template>
            {{ detail.insurance_date_b }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 品牌 </template>
            {{ detail.brand }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 型号 </template>
            {{ detail.vehicle_model }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 车辆类型 </template>
            {{ detail.vehicle_type }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 车辆统计类型 </template>
            {{ detail.vehicle_report_type }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 驱动类型 </template>
            {{ detail.drive_type }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 颜色 </template>
            {{ detail.color }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 车架号 </template>
            {{ detail.vin_number }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 发动机号 </template>
            {{ detail.engine_number }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 营运证号 </template>
            {{ detail.business_cert }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 登记日期 </template>
            {{ detail.reg_date }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 检验有效期 </template>
            {{ detail.check_date }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 营运有效期 </template>
            {{ detail.business_date }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 总质量 </template>
            {{ detail.weight }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 整备质量 </template>
            {{ detail.full_weight }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 核定质量 </template>
            {{ detail.approved_weight }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 核定载客 </template>
            {{ detail.passenger }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 发动机型号 </template>
            {{ detail.engine_model }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 燃油种类 </template>
            {{ detail.fuel_type }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 发动机功率 </template>
            {{ detail.engine_power }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 制造厂商 </template>
            {{ detail.manufacturer }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 轮距 </template>
            {{ detail.wheel_track }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 轮胎数量 </template>
            {{ detail.wheel_number }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 轮胎规格 </template>
            {{ detail.wheel_size }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 轴距 </template>
            {{ detail.wheel_base }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 外廓尺寸 </template>
            {{ detail.outline_size }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 货箱尺寸 </template>
            {{ detail.cargo_size }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 状态 </template>
            {{ detail.status }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 合同开始时间 </template>
            {{ detail.contract_start }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 合同结束时间 </template>
            {{ detail.contract_end }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 发票价格 </template>
            {{ detail.invoice_value }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> GPS平台 </template>
            {{ detail.gps }}
          </el-descriptions-item>

          <el-descriptions-item label-align="right">
            <template #label> 备注 </template>
            {{ detail.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </ele-modal>
</template>

<script setup>
  const emit = defineEmits(['done', 'update:modelValue']);
  import { ref, watch } from 'vue';
  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    vehicleId: {
      type: Number,
      default: 0
    },
    data: Object
  });
  import { getVehicleDetail } from '@/api/company';
  // const activeNames = ref(['12', '13', '14', '15', '16']);
  const activeNames = ref();
  const title = ref('');
  const detail = ref({});

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };

  /** 获取车辆详情 */
  const getDetail = () => {
    getVehicleDetail({ id: props.vehicleId })
      .then((res) => {
        detail.value = res;
      })
      .catch((e) => {
        console.log(e);
      });
  };

  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = props.data.plate_number;
        detail.value = props.data;
        getDetail();
      }
    }
  );
</script>
